<template>
  <card :width="1120" title="评价" v-loading="loading">
    <div slot="title" class="tabs flex">
      <div
        @click="tabClick(item.index)"
        v-for="(item, index) in tab"
        :key="index"
        :class="['tab', tabIndex == item.index ? 'tabActive' : '', 'shou']"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="search" v-if="tabIndex == 1">
      <el-select
        style="width: 224px"
        size="small"
        class="search_item"
        v-model="query.semesterId"
        clearable
        placeholder="请选择学期"
      >
        <el-option
          v-for="item in semesterList"
          :key="item.semesterId"
          :label="item.semesterName"
          :value="item.semesterId"
        >
        </el-option>
      </el-select>
      <el-input
        style="width: 224px"
        class="search_item"
        v-model="query.courseName"
        size="small"
        placeholder="请选择关键词"
      ></el-input>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="getEvaluatedList()"
      >搜索
      </el-button
      >
      <el-button size="small" icon="el-icon-refresh" @click="reset"
      >重置
      </el-button
      >
    </div>
    <div v-if="tabIndex == 0">
      <courses
        type="evaluate"
        height="calc(100vh - 68px - 18px - 105px)"
        :list="list"
        @refresh="getEvaluatedList()"
      ></courses>
    </div>
    <div v-if="tabIndex == 1">
      <evaluatedCourses
        :list="list"
        height="calc(100vh - 68px - 18px - 105px - 52px - 27px)"
      ></evaluatedCourses>
    </div>
  </card>
</template>

<script>
import courses from '@/components/courses'
import evaluatedCourses from '@/components/evaluatedCourses'
import { evaluateCourseList, semesterList } from '@/api/mine/mine'

export default {
  dicts: ['sys_course_type'],
  components: { courses, evaluatedCourses },
  props: {},
  data() {
    return {
      loading: false,
      semesterList: [],
      tabIndex: 0,
      tab: [
        { name: '待评价', index: 0 },
        { name: '已评价', index: 1 }
      ],
      list: [],
      query: {
        semesterId: '',
        courseName: ''
      }
    }
  },
  methods: {
    /* tab点击 */
    tabClick(index) {
      this.tabIndex = index
    },
    /* 获取已评价列表 */
    async getEvaluatedList() {
      this.loading = true
      evaluateCourseList(this.$store.getters.studentId, {
        semesterId: this.query.semesterId,
        courseName: this.query.courseName,
        studentId: this.$store.getters.studentId,
        stuEvaluateStatus: this.tabIndex
      })
        .then((res) => {
          this.list = res.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    /* 重置 */
    reset() {
      this.query = {
        semesterId: '',
        courseName: ''
      }
      this.getEvaluatedList()
    },
    /* 获取学期列表 */
    async getSemesterList() {
      let res = await semesterList(this.$store.getters.studentId)
      this.semesterList = res.data
    }
  },
  watch: {
    tabIndex: {
      handler: function() {
        this.getEvaluatedList()
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
    this.getSemesterList()
  }
}
</script>
<style scoped lang="scss">
.search {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 16px 0 27px 40px;
  box-sizing: border-box;
}

.search_item {
  margin-right: 20px;
  width: 220px;
}

.tabs {
  margin: auto 10px auto 0;

  .tab:nth-last-of-type(1) {
    border-right: none;
  }

  .tab {
    text-align: center;
    height: 14px;
    border-right: 1px solid #333333;
    width: 90px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }

  .tabActive {
    color: #28b28b;
  }
}
</style>
